<template>
  <!-- 添加或编辑对话框 -->
  <el-dialog class="xiaobu-form-dialog" v-bind="$attrs" v-on="$listeners">
    <div
      v-hasPermi="['system:config:update']"
      class="edit-box flex-c-e"
      v-show="baseForm.configId && baseForm.isSystem === '0'"
    >
      <el-button type="primary" class="edit" @click="toggleEdit">{{
        isEdit ? "取消编辑" : "编辑"
      }}</el-button>
    </div>
    <div class="el-dialog-body-child">
      <el-form
        class="clearfix"
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="rules"
        :disabled="!!(!isEdit && baseForm.configId)"
        label-width="120px"
      >
        <el-form-item class="half" label="配置项key" prop="configKey">
          <el-input
            v-model.trim="dialogForm.configKey"
            clearable
            placeholder="请输入配置项key"
          />
        </el-form-item>
        <el-form-item class="half" label="配置项Value" prop="configValue">
          <el-input
            v-model.trim="dialogForm.configValue"
            clearable
            placeholder="请输入配置项Value"
          />
        </el-form-item>
        <el-form-item class="all" label="备注" prop="remark">
          <el-input
            type="textarea"
            v-model="dialogForm.remark"
            :autosize="{ minRows: 5, maxRows: 8 }"
            clearable
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <template>
        <el-button @click="$emit('close')">{{
          !baseForm.configId || isEdit ? "取 消" : "关 闭"
        }}</el-button>
        <el-button
          type="primary"
          @click="submitForm"
          v-show="!baseForm.configId || isEdit"
          >确 定</el-button
        >
      </template>
    </div>
  </el-dialog>
</template>
<script>
import { configApi } from "@/api"
export default {
  name: "ConfigDialog",
  props: {
    // 是否是编辑
    isUpdate: {
      type: Boolean,
      default: false
    },
    // 配置数据
    baseForm: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    /** 检查用户名是否已存在 */
    const checkConfigKey = (rule, value, callback) => {
      const rex = /[A-Za-z_]+$/
      if (!rex.test(value)) {
        callback("配置代码只能为英文字母或下划线组成！")
        return
      }
      configApi
        .judgeExist({ configKey: value, configId: this.baseForm.configId })
        .then((data) => {
          if (data.validateResult) {
            callback()
          } else {
            callback(data.msg)
          }
        })
    }
    return {
      isEdit: false, // 是否是在编辑
      dialogForm: {}, // 弹框表单
      // 表单校验
      rules: {
        configKey: [
          {
            required: true,
            message: "请输入配置项key",
            trigger: ["blur", "change"]
          },
          { validator: checkConfigKey, trigger: "blur" }
        ],
        configValue: [
          {
            required: true,
            message: "请输入配置项Value",
            trigger: ["blur", "change"]
          }
        ]
      }
    }
  },
  watch: {
    isUpdate(val) {
      this.isEdit = val
    },
    // 监听baseForm变化 拷贝baseForm
    baseForm: {
      handler: function(val) {
        this.dialogForm = JSON.parse(JSON.stringify(val))
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 编辑或取消编辑
    toggleEdit() {
      if (!this.isEdit) {
        this.isEdit = true
        return
      }
      this.isEdit = false
      this.dialogForm = JSON.parse(JSON.stringify(this.baseForm))
    },
    // 重置表单
    resetForm() {
      this.isEdit = false
      this.$nextTick(() => {
        this.$refs.dialogFormRef.clearValidate()
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["dialogFormRef"].validate((valid) => {
        if (valid) {
          //更新
          if (this.dialogForm.configId) {
            configApi.updateItem(this.dialogForm).then((data) => {
              this.$modal.msgSuccess("编辑配置成功")
              this.$emit("close")
              this.$emit("successs")
            })
          } else {
            //新增
            configApi.createItem(this.dialogForm).then((data) => {
              this.$modal.msgSuccess("新增配置成功")
              this.$emit("close")
              this.$emit("successs")
            })
          }
        }
      })
    }
  }
}
</script>
